<template>
  <div class="stats-wrapper">
    <div class="stats-inner"  :style="innerStyle"  v-if="statsData.child && sortAreaData !== ''"> 
      <Header :batchInfo="statsData.currentBatchTimeLine"></Header>
      <Footer></Footer>
      <div class="stats-box" style="width: 480px;height: 160px;left: 20px; top: 120px;">
        <div class="stats-box-title">考生参考人数</div>
        <div class="stats-box-body">
          本市已考试人数（人）{{statsData.finishedByNormalStuNum + statsData.finishedByResitStuNum}}<br />
          缺考人数（人）{{statsData.missedStuNum}}
        </div>
      </div>
      <div class="stats-box" style="width: 480px;height: 600px;left: 20px; top: 300px;">
        <div class="stats-box-title">各学校参考人数</div>
        <div class="stats-box-body">
          <div v-for="item,i in areaData.child" class="stats-text-list">
           <span> {{item.areaName}}</span>
           <span>{{item.confirmedStuNum}}人</span>
          </div>
        </div>
      </div>
      <div class="stats-box" style="width: 480px;height: 380px;right: 20px; top: 120px;">
        <div class="stats-box-title">各学校考生比例</div>
        <div class="stats-box-body">
          <echarts-rose-pie :areaData="areaData"></echarts-rose-pie>
        </div>
      </div>
      <div class="stats-box" style="width: 960px;height: 780px;left: 520px; top: 120px;">
        <div class="stats-box-title">{{areaData.areaName}}科学实验考试进度</div>
        <div class="stats-box-body">
          <div class="stats-tab-nav">
            <span v-for="item,i in statsData.child" :key="i" @click="changArea(item)"
              :class="{on:item.areaName === currentArea}">{{item.areaName}}</span>
          </div>
          <div class="stats-text">
            <div>
              <span>完成考试人数（人）</span><br>
              <strong>{{areaData.finishedByNormalStuNum + areaData.finishedByResitStuNum}}</strong>
            </div>
            <div>
              <span>未考人数（人）</span><br>
              <strong>{{areaData.waitingStuNum}}</strong>
            </div>
            <div>
              <span>补考人数（人）</span><br>
              <strong>{{areaData.notFinishedByResitStuNum + areaData.finishedByResitStuNum}}</strong>
            </div>
          </div>
          <div class="stats-table">
            <area-table-view :areaData="areaData.child"></area-table-view>
          </div>
        </div>
      </div>
      <div class="stats-box" style="width: 480px;height: 380px;right: 20px; top: 520px;">
        <div class="stats-box-title">各学校已考学生人数排行</div>
        <div class="stats-box-body">
          <div v-for="item,i in sortAreaData" v-if="i < 7" class="stats-text-list stats-rank" :key="i"  :rank-num="(i + 1) + '.'">
           <span >{{item.areaName}}</span>
           <span>{{item.finishedByNormalStuNum + item.finishedByResitStuNum}}人</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EchartsRosePie from '@/components/stats/EchartsRosePie.vue'
import AreaTableView from '@/components/stats/AreaTableView.vue'

import statsMixin from '@/common/mixins/statsMixin'

export default {
  mixins: [statsMixin],
  components: {
    EchartsRosePie,
    AreaTableView,
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    changArea (item) {
      sessionStorage.setItem('statsCurrentArea', item.areaName)
      this.setAreaData()
    },
    setAreaData () {
      if(sessionStorage.getItem('area') && sessionStorage.getItem('area') != 'null' ){
        this.currentArea = sessionStorage.getItem('area')
      } else if(sessionStorage.getItem('statsCurrentArea') && sessionStorage.getItem('statsCurrentArea') != 'null'){
        this.currentArea = sessionStorage.getItem('statsCurrentArea')
      } else {
        this.$router.push('/')
      }
      this.statsData = JSON.parse(sessionStorage.getItem('statsData'))
      this.areaData = this.statsData.child.filter(item => item.areaName === this.currentArea)[0]
      this.sortAreaData = this.areaData.child.sort((a,b) => b.finishedByNormalStuNum - a.finishedByNormalStuNum)
    },
  }
}
</script>

<style scoped>

</style>
